<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>插件的使用</h2>
<ul>
1.BannerPlugin插件，对打包文件的最终版权进行注释
<li>在webpack.config.js文件中导入webpack文件并定义变量存储，使用变量.BannerPlugin属性的方法引入</li>
<li>打包代码文件</li>
2.html-webpack-plugin插件，将根html文件引入dist目录
<li>下载安装插件，在webpack.config的plugin内添加插件对象</li>
<li>由于index.html内部存在标签等内容，我们还需要在plugin插件对象内添加模板文件对象，这样打包时就会自动从index引入内容</li>
<li>需要修改loader时webpack.config.js配置的图片路径</li>
3.uglifyjs-webpack-plugin
<li>同样下载，引入，配置，打包，最后会将打包文件进行压缩删除空格和注释因此和某些插件作用相互抵消</li>
4.dev-server搭建本地服务器,避免频繁使用打包命令将数据冲入磁盘而是在缓存中进行测试
    <li>下载，webpack.config.js配置，package.json配置快捷命令同时增加--open参数可以直接打开浏览器访问</li>
5.webpack-merge将webpck.config.js分离为运行时配置，开发时配置以及他们共有的配置三个文件到build目录下
<li>下载好插件在src同级目录下建立配置文件目录，建立base,dev,pro三个文件</li>
    <li>dev和pro除了自身文件还需要分别引入base公共文件进行合并</li>
    <li>文件配置好后进入package.json为快捷命令指定路径</li>
<li>同时我们还需要在base文件中修改打包文件的路径为上一级目录的dist文件（默认为root目录也就是webpack.config.js</li>
</ul>
</body>
</html>